<template>
  <div class="todoItem">
    <p v-for="(item,index) of clinicList.materialList" :key="index">
      <el-checkbox v-model="item.checked" @change="checkedChange(item,item.count)">{{ item.bomName }}</el-checkbox>
      <el-input v-model="item.count" placeholder="填写申请数量" oninput="value=value.replace(/[^\d]/g,'')" @blur="checkedBlur(item,item.count)"></el-input>
      <span>套</span>
    </p>
    <p class="statistics">您共申请了<span>{{ number }}</span>类物料，物料总计<span>{{ total }}</span>套。</p>
  </div>
</template>
<script>
export default {
  name: 'TodoItem',
  components: {},
  props: {
    clinicList: {
      type: Object,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      number: 0,
      total: 0
    };
  },
  methods: {
    checkedChange(item, count) {
      item.checked ? (this.number += 1, this.total += Number(count)) : (this.number -= 1, this.total -= Number(count));
      const index = this.clinicList.itemList.findIndex(e => {
        return e.bomId === item.bomId;
      });
      item.checked ? this.showItemList(item) : this.clinicList.itemList.splice(index, 1);
    },
    checkedBlur(item, count) {
      this.total = 0;
      this.clinicList.materialList.forEach(e => {
        if (e.checked) {
          this.total += Number(e.count);
        }
      });
      item.checked ? this.showItemList(item) : null;
    },
    showItemList(data) {
      const _itemList = this.clinicList.itemList;
      let flag = false;
      if (_itemList.length === 0) {
        return _itemList.push({ bomId: data.bomId, bomName: data.bomName, count: data.count });
      }
      for (let i = 0, len = _itemList.length; i < len; i++) {
        if (_itemList[i].bomId === data.bomId) {
          _itemList[i].count = data.count;
          flag = false;
          break;
        } else {
          flag = true;
        }
      }
      if (flag) {
        _itemList.push({ bomId: data.bomId, bomName: data.bomName, count: data.count });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
  .todoItem{
    .el-input{
      width: 140px;
      margin-left: 65px;
    }
    span{
      margin-left: 5px;
    }
    >>> .el-checkbox__label{
      color: #707070;
      font-weight: 400;
      width: 150px;
    }
    .statistics{
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 26px;
      color: #707070;
      span{
        color: #508FCC;
        margin-right: 5px;
      }
    }
  }
</style>
